<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

<title>创建用户</title>

<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/admin.css">
<script src="js/jq.js"></script>
<script src="js/admin.js"></script>
</head>
<body>
<div class="panel admin-panel ">
  <div class="panel-head" ><strong class="icon-reorder">新建用户</strong></div>
  <div class="body-content">
    <form method="post" class="form-x" action="UserServlet?method=saveUser"> 
           
      <div class="form-group">
        <div class="label">
          <label>用户姓名：</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" name="name" id="name" data-validate="required:请输入用户名"  />
          <div class="tips"></div>
        </div>
      </div>
      
      
      <div class="form-group">
        <div class="label">
          <label>用户编号：</label>
        </div>
        <div class="field" >
          <input type="text" class="input w50" name="userId" id="userId" data-validate="required:请输入编号"/>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span id="spuserId" style="line-height: 35px;font-size: 15px;color: red; display: none;">编号已存在！</span>
          <div class="tips"></div>
        </div>
      </div>        
      
      
      <div class="form-group">
        <div class="label">
          <label>账号：</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" name="userName" id="userName" data-validate="required:请输入账号"/>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span id="spuserName" style="line-height: 35px;font-size: 15px;color: red; display: none;">账号已存在！</span>      
        </div>
      </div>
      
      
      <div class="form-group">
        <div class="label">
          <label>密码：</label>
        </div>
        <div class="field">
          <input type="password" class="input w50" name="password" id="password" data-validate="required:请输入密码"/>         
        </div>
      </div>
      
      <div class="form-group">
        <div class="label">
          <label>确认密码：</label>
        </div>
        <div class="field">
          <input type="password" class="input w50" name="repassword" id="repassword" />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span id="sprepwd" style="line-height: 35px;font-size: 12px;color: red; display: none;">密码不一致！</span>         
        </div>
      </div>


      <div class="form-group">
        <div class="label">
          <label>所属角色：</label>
        </div>
        <div class="field">
          <select name="roleId" data-validate="required:请选择权限" class="input w50">
              <option value="">请选择</option>
              <c:forEach items="${lr }" var="l">
              <option value="${l.roleId }">${l.roleName }</option>
              </c:forEach>
            </select>
          </div>
      </div>
      
      
      <div class="form-group">
        <div class="label">
          <label></label>
        </div>
        <div class="field">
          <button class="button bg-main icon-check-square-o" type="submit" id="submit" > 提交</button>
        </div>
      </div>
    </form>
  </div>
</div>
</body>
<script type="text/javascript">
$(function(){
	//判断编号是否存在
	$("#userId").blur(function(){
		//获取userId的值
		var userId = $("#userId").val();
		//ajax传值
		$.post("UserServlet",{method:"findUserId",userId:userId},function(data){
			//将span设置隐藏
			$("#spuserId").css("display","none");
			$("#submit").attr("disabled",false);
			//判断该编号是否已存在,如果存在，data为true
			if(eval(data)){
				$("#spuserId").css("display","");
				$("#submit").attr("disabled",true);
			}
		})
	});
	//判断账号是否已经存在
	$("#userName").blur(function(){
		//获取userId的值
		var userName = $("#userName").val();
		//ajax传值
		$.post("UserServlet",{method:"findUserName",userName:userName},function(data){
			//将span设置隐藏
			$("#spuserName").css("display","none");
			$("#submit").attr("disabled",false);
			//判断账号是否存在
			if(eval(data)){
				$("#spuserName").css("display","");
				$("#submit").attr("disabled",true);
			}
		})
	})
	//判断两次输入密码是否相同
	$("#repassword").blur(function(){
		var pwd = $("#password").val();
		var repwd = $("#repassword").val();
        $("#sprepwd").css("display","none");
        $("#submit").attr("disabled",false);
		if(pwd!=repwd){
			$("#sprepwd").css("display","")
			$("#submit").attr("disabled",true);
		}
	})
})
</script>
	
</html>